<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是展示 Entity.
 */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";


  
  var point = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-105.0, 41, 50010),
      point: {
        show: true,
        pixelSize: 10, // 像素大小
      },
    });

    var polygon = viewer.entities.add({
      id: "entity_1",
      name: "Green extruded polygon",
      description: "这是一个多边形体块",
      polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
          -108.0,
          42.0,
          -100.0,
          42.0,
          -104.0,
          40.0,
        ]),
        extrudedHeight: 50000.0,
        material: Cesium.Color.GREEN,
      },
    });
    viewer.zoomTo(viewer.entities);

    // var entity = viewer.entities.getById("entity_1");
    // viewer.entities.remove(entity);
    // viewer.entities.removeById("entity_1");
    // viewer.entities.removeAll();

    // 添加拾取事件
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (movement) {
      var pickedEntity = pickEntity(viewer, movement.position);
      console.log(pickedEntity);

      var pickedEntities = drillPickEntities(viewer, movement.position);
      console.log(pickedEntities);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    /**
     * Returns the top-most entity at the provided window coordinates
     * or undefined if no entity is at that location.
     *
     * @param {Cartesian2} windowPosition The window coordinates.
     * @returns {Entity} The picked entity or undefined.
     */
    function pickEntity(viewer, windowPosition) {
      var picked = viewer.scene.pick(windowPosition);
      if (Cesium.defined(picked)) {
        var id = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (id instanceof Cesium.Entity) {
          return id;
        }
      }
      return undefined;
    }

    /**
     * Returns the list of entities at the provided window coordinates.
     * The entities are sorted front to back by their visual order.
     *
     * @param {Cartesian2} windowPosition The window coordinates.
     * @returns {Entity[]} The picked entities or undefined.
     */
    function drillPickEntities(viewer, windowPosition) {
      var i;
      var entity;
      var picked;
      var pickedPrimitives = viewer.scene.drillPick(windowPosition);
      var length = pickedPrimitives.length;
      var result = [];
      var hash = {};

      for (i = 0; i < length; i++) {
        picked = pickedPrimitives[i];
        entity = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (
          entity instanceof Cesium.Entity &&
          !Cesium.defined(hash[entity.id])
        ) {
          result.push(entity);
          hash[entity.id] = true;
        }
      }
      return result;
    }
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
